<template>
	<view>
		<top-navbar title="订单详情"></top-navbar>
		<view class="order_content order-details">
			<!-- 联系人信息 -->
			<view class="order_contact">
				<view class="order_user">
					{{ orderInfo.real_name }} {{ orderInfo.user_phone }}
				</view>
				<view class="contact_address">
					{{ orderInfo.user_address }}
				</view>
			</view>
			<view class="wapper border">
				<view class="row">
					<text class="label">配送单号</text>
					<text class="txt">{{ orderInfo.order_id }}</text>
				</view>
				<view class="row">
					<text class="label">服务次数</text>
					<view class="txt acea-row row-between row-middle">
						<view class="">
							
							<view class="">
								<text style="margin-right: 20rpx;">第{{ numberToUpperCase(orderInfo.no) }}次</text>
								<text style="margin-right: 20rpx;">{{ timestampToTime(orderInfo.delivery_time) }}</text>
								<text>{{ getWeek(new Date(timestampToTime(orderInfo.delivery_time))) }}</text>
							</view>
						</view>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="row" v-if="orderInfo.shipping_type == 1">
					<text class="label">配送状态</text>
					<text class="txt" v-if="orderInfo.status == 0">待配送</text>
					<text class="txt" v-if="orderInfo.status == 1">配送中</text>
					<text class="txt" v-if="orderInfo.status == 2">已配送</text>
				</view>
				<view class="row" v-if="orderInfo.shipping_type == 2">
					<text class="label">配送状态</text>
					<text class="txt">待核销</text>
				</view>
				<view class="row">
					<text class="label">随货配件</text>
					<text class="txt">无</text>
				</view>
				<!-- <view class="row">
					<text class="label">发货日期</text>
					<text class="txt">{{ orderInfo.delivery_time_y }}</text>
				</view> -->
				<view class="row" v-if="orderInfo.verify_code">
					<text class="label">核销码</text>
					<text class="txt">{{ orderInfo.verify_code }}</text>
				</view>
			</view>
			<view class="writeOff border" v-if="orderInfo.verify_code && orderInfo.shipping_type == 2">
				<view class="acea-row row-between-wrapper padding30">
					<view>自提门店：{{ orderInfo.system_store.name }}</view>
					<view class="place acea-row row-center-wrapper" @tap="showMaoLocation">
						<text class="iconfont icon-weizhi"></text>
					</view>
				</view>
				<view class="rules" style="margin-top: 0;">
					<!--  v-if="orderInfo.shipping_type == 2" -->
					<view class="item">
						<view class="rulesTitle acea-row row-middle">
							<text class="iconfont icon-shijian"></text>核销时间
						</view>
						<view class="info">
							每日：<text class="time">{{orderInfo.system_store.day_time}}</text>
						</view>
					</view>
					<view class="item">
						<view class="rulesTitle acea-row row-middle">
							<text class="iconfont icon-shuoming1"></text>使用说明
						</view>
						<view class="info">{{orderInfo.shipping_type == 2?'可将二维码出示给店员扫描或提供数字核销码':'可将二维码出示给配送员进行核销'}}
						</view>
					</view>
				</view>
			</view>
			<view class="writeOff border" v-if="orderInfo.verify_code">
				<view class="title">核销二维码</view>
				<view class="grayBg">
					<view class="written" v-if="orderInfo.status == 2 || orderInfo.status == 3">
						<!-- <image src="@/static/images/written.png"></image> -->
						<text>已核销</text>
					</view>
					<view class="pictrue">
						<image :src="orderInfo.code"></image>
					</view>
				</view>
				<view class="gear">
					<image src="@/static/images/writeOff.jpg"></image>
				</view>
				<view class="num">{{orderInfo._verify_code}}</view>
			</view>
		</view>
		<view class="place"></view>
		<view class="footer acea-row row-right row-middle">
			<navigator 
				:url="'/pages/users/edit_time/edit_time?orderId=' + orderId + '&childId=' + orderInfo.id" 
				class="qs-btn"
			>修改配送时间</navigator>
			<navigator 
				url="/pages/users/user_address_list/index" 
				v-if="orderInfo.shipping_type !== 2" 
				class="bnt bg-green"
			>修改收货地址</navigator>
			<view class="bnt bg-green" v-if="orderInfo.shipping_type == 1 && isZt == 1" @click="$refs.popup1.show()">转自提</view>
		</view>
		<!-- 转自提 -->
		<wyb-popup ref="popup1" type="bottom" radius="6" :showCloseIcon="false">
		    <view class="popup-content">
		        <view class="title acea-row row-center row-middle" style="height: 50rpx">
					<text class="iconfont icon-guanbi" @click='$refs.popup1.hide()' style="top: 50rpx;"></text>
				</view>
				<view class="pop-body acea-row row-column row-center row-middle">
					<text>您是否确定</text>
					<text>将该配送订单转为门店自提</text>
				</view>
				<view class="foot acea-row row-center row-middle">
					<view class="cancelbnt" @click="$refs.popup1.hide()">不了</view>
					<view class="bnt bg-green" @click="confirm">确定</view>
				</view>
		    </view>
		</wyb-popup>
		<!-- 门店选择 -->
		<wyb-popup ref="popup" type="bottom" radius="6" :showCloseIcon="false">
		    <view class="popup-content">
		        <view class="title acea-row row-center row-middle">
					选择门店
					<text class="iconfont icon-guanbi" @click='$refs.popup.hide()'></text>
				</view>
				<view class="pop-body" style="padding: 30rpx;">
					<view class="option acea-row row-column row-center row-middle bg-gray" @click="chooseStore">
						<view class='name' v-if="system_store.name">
							<text class='phone'>{{system_store.name}} {{system_store.phone}}</text>
						</view>
						<text v-if="system_store.address">
							{{system_store.address}}{{", " + system_store.detailed_address}}
						</text>
						<text v-else>选择自提门店</text>
					</view>
				</view>
				<view class="foot acea-row row-center row-middle" style="padding: 30rpx;">
					<view class="bnt bg-green" style="width: 100%; margin: 0;" @click="orderTransfer">确定</view>
				</view>
		    </view>
		</wyb-popup>
	</view>
</template>

<script>
	import {
		getAddressDefault,
		getAddressDetail,
	} from '@/api/user.js';
	import {
		orderToSelf,
		editOrderAddress,
		childOrderInfo
	} from '@/api/order.js';
	export default {
		data() {
			return {
				system_store: {},
				addressId: '',
				addressInfo: {},
				orderInfo: {},
				orderId: '',
				isZt: '',
				system_store: {},
				child_id: ''
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _this = this
			uni.$on("handClick", res => {
				if (res) {
					_this.system_store = res.address
				}
				// 清除监听
				uni.$off('handClick');
			})
			if(uni.getStorageSync('addressId')) {
				uni.showModal({
				    title: '提示',
				    content: '您是否确定要修改收货地址',
					cancelText: '不了',
					confirmText: '确定',
				    success: (res) => {
				        if (res.confirm) {
							this.addressId = uni.getStorageSync('addressId')
							this.changeAddress()
							// this.getaddressInfo();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
							uni.removeStorageSync('addressId')
				        }
				    }
				});
			}
		},
		onLoad(opt) {
			if(opt.id) {
				this.child_id = opt.id
				this.getOrderDetail(opt.id)
				// this.orderInfo = JSON.parse(opt.data)
				this.orderId = opt.orderId
				this.isZt = opt.isZt
			}
		},
		methods: {
			// 获取子订单详情
			getOrderDetail(id) {
				childOrderInfo(id).then(res => {
					console.log(res)
					this.orderInfo = res.data
					this.system_store = res.data.system_store
				})
			},
			confirm() {
				this.$refs.popup1.hide()
				this.$refs.popup.show()
			},
			chooseStore() {
				uni.navigateTo({
					url: '/pages/users/goods_details_store/index'
				})
			},
			/*
			 * 获取默认收货地址或者获取某条地址信息
			 */
			getaddressInfo: function() {
				let that = this;
				if (that.addressId) {
					getAddressDetail(that.addressId).then(res => {
						// console.log(res)
						that.addressInfo = res.data || {};
						that.addressId = res.data.id || 0;
						uni.removeStorageSync('addressId')
					})
				} 
			},
			// 修改收货地址
			changeAddress() {
				editOrderAddress({
					shippingId: this.orderInfo.id,
					orderId: this.orderInfo.oid,
					addressId: this.addressId
				}).then(res => {
					this.$util.Tips({
						title: res.msg
					});
					this.$set(this.orderInfo, 'real_name', res.data.result.real_name)
					this.$set(this.orderInfo, 'user_phone', res.data.result.user_phone)
					this.$set(this.orderInfo, 'user_address', res.data.result.user_address)
					uni.removeStorageSync('addressId')
				}).catch(err => {
					uni.removeStorageSync('addressId')
				})
			},
			// 配送订单转为门店自提
			orderTransfer() {
				if(!this.system_store.id) return this.$util.Tips({
					title: '请先选择自提门店'
				});
				orderToSelf({
					shippingId: this.orderInfo.id, // 子订单id
					orderId: this.orderInfo.oid, //主订单id
					storeId: this.system_store.id // 门店id
				}).then(res => {
					this.$util.Tips({
						title: res.msg
					});
					this.$refs.popup.hide()
					
					// this.orderInfo.verify_code = res.data.result.verify_code
					this.getOrderDetail(this.child_id)
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
			},
			numberToUpperCase(textIndex) {
			    let newString = '';
			    let newTextIndex = textIndex + '';
			
			    function sum(value, index) {
					var newValue = '';
					if ((textIndex === 9)) {
						return !index ? '十' : '';
					}
					let isSeat = (~~textIndex > 9 && ~~textIndex < 19);
					switch (~~value) {
						case 1:
						  newValue = !index ? (isSeat ? '' : '一') : '十一';
						  break;
						case 2:
						  newValue = !index ? (isSeat ? '' : '二') : '十二';
						  break;
						case 3:
						  newValue = !index ? (isSeat ? '' : '三') : '十三';
						  break;
						case 4:
						  newValue = !index ? (isSeat ? '' : '四') : '十四';
						  break;
						case 5:
						  newValue = !index ? (isSeat ? '' : '五') : '十五';
						  break;
						case 6:
						  newValue = !index ? (isSeat ? '' : '六') : '十六';
						  break;
						case 7:
						  newValue = !index ? (isSeat ? '' : '七') : '十七';
						  break;
						case 8:
						  newValue = !index ? (isSeat ? '' : '八') : '十八';
						  break;
						case 9:
						  newValue = !index ? (isSeat ? '' : '九') : '九十';
						  break;
						case 0:
						  newValue = '十';
						  break;
						default:
						  break;
					}
					return newValue;
			    }
			
			    for (let i = 0; i < newTextIndex.length; i++) {
			      newString += sum(newTextIndex.substring(i, i + 1), i);
			    }
			    return newString;
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = (date.getDate() < 10 ? '0'+ date.getDate() : date.getDate()) + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				// return Y+M+D+h+m+s;
				return Y+M+D;
			},
			getLocalTime(nS) {     
			   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
			},
			getWeek(date) {
			    var week;
			    if(date.getDay() == 0) week = "星期日"
			    if(date.getDay() == 1) week = "星期一"
			    if(date.getDay() == 2) week = "星期二"
			    if(date.getDay() == 3) week = "星期三"
			    if(date.getDay() == 4) week = "星期四"
			    if(date.getDay() == 5) week = "星期五"
			    if(date.getDay() == 6) week = "星期六"
			    return week;
			},
			/**
			 * 打开地图
			 * 
			 */
			showMaoLocation: function() {
				if (!this.system_store.latitude || !this.system_store.longitude) return this.$util.Tips({
					title: '缺少经纬度信息无法查看地图！'
				});
				uni.openLocation({
					latitude: parseFloat(this.system_store.latitude),
					longitude: parseFloat(this.system_store.longitude),
					scale: 8,
					name: this.system_store.name,
					address: this.system_store.address + this.system_store.detailed_address,
					success: function() {
			
					},
				});
			},
		}
	}
</script>

<style lang="scss">
page {
	// background-color: #fff;
}
.place {
	height: 100rpx;
	height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
	height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}
.order_content {
	width: 100%;
	padding: 30rpx;
	.order_contact {
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		.order_user {
			font-size: 32rpx;
		}
		.contact_address{
			color: #999;
		}
	}
	.border {
		border: 1px solid #eee;
		border-radius: 10rpx;
	}
	.wapper {
		width: 100%;
		padding: 20rpx 30rpx;
		background-color: #fff;
		.row {
			display: flex;
			align-items: center;
			width: 100%;
			min-height: 80rpx;
			padding: 20rpx 0;
			&:not(:last-child) {
				border-bottom: 1px solid #eee;
			}
			.label {
				width: 120rpx;
				margin-right: 50rpx;
			}
			.txt {
				flex: 1;
				color: #999;
			}
		}
	}
}
.footer {
	width: 100%;
	height: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
	height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;
	box-shadow: 0 0 10rpx 5rpx #eee;
	padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
	padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
	.qs-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30%;
		height: 70rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
		color: #aaa;
		border: 1px solid #ddd;
		margin-right: 20rpx;
		.iconfont {
			margin-right: 10rpx;
		}
	}
	.bnt {
		width: 30%;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
		margin-right: 20rpx;
	}
}
.popup-content {
	position: relative;
	width: 100%;
	height: 100%;
	.title {
		position: relative;
		width: 100%;
		height: 100rpx;
		border-radius: 20rpx 20rpx 0 0;
		font-size: 32rpx;
		font-weight: 700;
		.iconfont {
			position: absolute;
			top: 50%;
			right: 30rpx;
			transform: translate(0,-50%);
			background-color: #333;
			color: #fff;
			border-radius: 50%;
			padding: 10rpx;
			font-size: 20rpx;
		}
	}
	.pop-body {
		padding: 30rpx 0;
		text {
			font-size: 32rpx;
			margin: 10rpx 0;
		}
		.option {
			width: 100%;
			height: 165rpx;
			border: 1px solid #ddd;
			border-radius: 10rpx;
		}
	}
	.foot {
		width: 100%;
		height: 120rpx;
		font-size: 30rpx;
		.cancelbnt {
			width: 230rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 40rpx;
			border: 1px solid #ccc;
			margin-right: 20rpx;
		}
		.bnt {
			width: 230rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 40rpx;
			border: 1px solid #a0cd43;
			color: #fff;
			margin-left: 20rpx;
		}
	}
}
.order-details .writeOff {
	background-color: #fff;
	margin-top: 30rpx;
	padding-bottom: 30rpx;
}
.order-details .writeOff .title {
	font-size: 30rpx;
	color: #282828;
	height: 100rpx;
	border-bottom: 1px solid #f0f0f0;
	padding: 0 30rpx;
	line-height: 100rpx;
}
.order-details .writeOff .grayBg {
	background-color: #f2f5f7;
	width: 590rpx;
	height: 384rpx;
	border-radius: 20rpx 20rpx 0 0;
	margin: 50rpx auto 0 auto;
	padding-top: 55rpx;
	position: relative;
	overflow: hidden;
}
.order-details .writeOff .grayBg .written {
	position: absolute;
	top: 8rpx;
	right: -20rpx;
	width: 200rpx;
	height: 140rpx;
	transform: rotate(45deg);
}
.order-details .writeOff .grayBg .written text {
	display: block;
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 28rpx;
	background-color: #CCCCCC;
}
.order-details .writeOff .grayBg .pictrue {
	width: 290rpx;
	height: 290rpx;
	margin: 0 auto;
}
.order-details .writeOff .grayBg .pictrue image {
	width: 100%;
	height: 100%;
	display: block;
}
.order-details .writeOff .gear {
	width: 590rpx;
	height: 30rpx;
	margin: 0 auto;
}
.order-details .writeOff .gear image {
	width: 100%;
	height: 100%;
	display: block;
}
.order-details .writeOff .num {
	background-color: #f0c34c;
	width: 590rpx;
	height: 84rpx;
	color: #282828;
	font-size: 48rpx;
	margin: 0 auto;
	border-radius: 0 0 20rpx 20rpx;
	text-align: center;
	padding-top: 4rpx;
}
.order-details .writeOff .rules {
	margin: 46rpx 30rpx 0 30rpx;
	border-top: 1px solid #f0f0f0;
	padding-top: 10rpx;
}
.order-details .writeOff .rules .item {
	margin-top: 20rpx;
}
.order-details .writeOff .rules .item .rulesTitle {
	font-size: 28rpx;
	color: #282828;
}
.order-details .writeOff .rules .item .rulesTitle .iconfont {
	font-size: 30rpx;
	color: #a0cd43;
	margin-right: 8rpx;
	margin-top: 5rpx;
}
.order-details .writeOff .rules .item .info {
	font-size: 28rpx;
	color: #999;
	margin-top: 7rpx;
}
.order-details .writeOff .rules .item .info .time {
	margin-left: 20rpx;
}
.writeOff .place {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background-color: #ff5637;
	border-color: #ff5637;
	.iconfont {
		color: #fff;
		font-size: 24rpx;
	}
}
</style>
